/*
 * @Author: ray
 * @Date:   2019-07-01 14:56:54
 * @Last Modified by:   ray
 * @Last Modified time: 2019-07-05 11:09:54
 */
import ic_baocuo from "@assets/ic_baocuo.png";
class ContentProtect extends React.Component {
	constructor(props) {
		super(props);
		this.state = { hasError: false };
	}

	static getDerivedStateFromError(error) {
		// Update state so the next render will show the fallback UI.
		if (
			error &&
			error.message &&
			/Loading chunk [^ ]+ failed\./.test(error.message)
		) {
			//reload when had not auto reload record,or when last reload time more than 2 minite.
			if (
				!Uts.storage.get("lastAutoReload") ||
				Uts.now() - Uts.storage.get("lastAutoReload").tid > 60 * 1000
			) {
				Uts.storage.set("lastAutoReload", { tid: Uts.now() });
				location.reload();
				return false;
			}
		}
		return { hasError: true };
	}

	componentDidCatch(error, info) {
		// You can also log the error to an error reporting service
		console.log(error, info);
		this.setState({ error, info });
		/*REST.post(
			"/store/api/product/category/findHomePageAllCategories",
			{ data: Uts.toStr(error) },
			"noInfo"
		).then(
			function(data) {
				console.log(data);
			},
			function(error) {
				console.log(error);
			}
		);*/
	}

	render() {
		if (this.state.hasError) {
			// You can render any custom fallback UI
			return (
				<div className={"cart-content-warpper error-page-wrap"}>
					<div className={"cart-content-box"}>
						<div className={"zen_t-c cart-not-found-pro "}>
							<img
								className="zen_m-b-20"
								src={ic_baocuo}
								alt=""
							/>
							<p
								style={{
									color: "rgba(150, 150, 150, 1)"
								}}
							>
								抱歉，页面报错了，请将错误信息发送给客服人员。感谢！
							</p>
							<div className={"cart-not-found-pro-empty"}>
								<p
									style={{
										color: "rgba(150, 150, 150, 1)",
										fontSize: 13
									}}
								>
									<div className="error-page-wrap zen_t-c">
										<h3>
											错误信息：
											{this.state.error &&
												this.state.error.toString()}
											{this.state.info &&
												this.state.info
													.componentStack &&
												Filter.cutString(
													Uts.toStr(
														this.state.info
															.componentStack
													),
													55,
													1
												)}
										</h3>
									</div>
								</p>
							</div>
							<div className={"cart-not-found-pro-tips"}>
								<p>
									请点此
									<span
										onClick={() => {
											$state.go({
												stateName: "/"
											});
											setTimeout(function() {
												location.reload();
											}, 200);
										}}
										className={
											"cart-not-found-pro-tips-span"
										}
									>
										返回首页
									</span>
								</p>
							</div>
						</div>
					</div>
				</div>
			);
		}

		return <div className="main-content-wrap">{this.props.children}</div>;
	}
}

export default ContentProtect;
